<template>
    <div>
        <div class="user" @click="toUserInfo">
            <div class="user-avatar">
              <img :src="user.avatar">
            </div>

            <div class="user-content">
                <div class="user-content__warp info-top">
                    <div class="info-top__name ellipsis">{{ user.name }}</div>
                    <div class="info-top__bednum">{{ user.bedNum }}</div>
                </div>
                <div class="user-content__warp info-bottom">
                    <div class="info-bottom__tag" 
                      :class="{ 'level-one' : user.tagText === 1,
                        'level-two' : user.tagText === 2,
                        'level-three' : user.tagText === 3,
                        'level-super' : user.tagText === 9 }
                      ">
                      {{ user.tagText | formatTagText }}</div>
                    <div class="info-bottom__age" :class="{ 'male': user.gender === 1, 'female': user.gender === 2 }">{{ user.age }}岁</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'UserInfo',
    props: {
        property: Object,
        defaultUser: {
            type: Object,
            default: () => {
                return {
                    avatar: require('../../../assets/headimg.png'),
                    name: '王翠芬',
                    tagText: 9,
                    bedNum: '01',
                    gender: 1,
                    age: 78
                }
            }
        }
    },
    computed: {
        user () {
            const userInfo = this.property
            if (userInfo) {
                return {
                    avatar: userInfo.avatar || require('../../../assets/headimg.png'),
                    name: userInfo.real_name,
                    tagText: userInfo.nurse_grade,
                    bedNum: userInfo.bedNum,
                    gender: userInfo.sex,
                    age: userInfo.age
                }
            }
            return { ...this.defaultUser }
        }
        
    },
    filters: {
        formatTagText (code) {
            const tag = {
                '1': '一级护理',
                '2': '二级护理',
                '3': '三级护理',
                '9': '特级护理'
            }
            return tag[code] || ''
        }
    },
    methods: {
      toUserInfo () {
        this.$router.push({ name: 'userInfoDetail' })
      }
    }
}
</script>

<style lang="scss" scoped>
.user {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.user-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
}
.user-content {
    width: 76%;
}
.user-content__warp {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.info-top {
    text-align: left;
    &__name {
        font-size: 28px;
        font-weight: 400;
        color: #000000;
    }
    &__bednum {
        font-size: 40px;
        font-weight: 400;
        color: #000000;
    }
}
.info-bottom {
    text-align: right;
    &__tag {
        width: 104px;
        height: 29px;
        border-radius: 4px;
        font-size: 22px;
        font-weight: 400;
        line-height: 29px;
        text-align: center;
        margin-top: 10px;
        &.level-super {
            border: 1px solid #BF1414;
            color: #BF1414;
        }
        &.level-one {
            border: 1px solid #ED8484;
            color: #ED8484;
        }
        &.level-two {
            border: 1px solid #FF8900;
            color: #FF8900;
        }
        &.level-three {
            border: 1px solid #51C424;
            color: #51C424;
        }
    }
    &__age {
        display: flex;
        align-items: center;
        font-size: 24px;
        font-weight: 400;
        color: #333333;
        margin-top: 2px;
        &.male::before{
            content: '男';
            display: block;
            height: 33px;
            font-weight: 400;
            color: #333333;
            padding-left: 30px;
            padding-right: 20px;
            margin-right: 25px;
            background: url('~@/assets/icon_male.png') no-repeat left center;
            background-size: 26px 26px;
            border-right: 1px solid #D1D1D1;
        }
        &.female::before{
            content: '女';
            display: block;
            height: 33px;
            padding-left: 30px;
            padding-right: 20px;
            margin-right: 25px;
            font-weight: 400;
            color: #333333;
            background: url('~@/assets/icon_female.png') no-repeat left center;
            background-size: 26px 26px;
            border-right: 1px solid #D1D1D1;
        }
    }
}
</style>